<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view/>
    </div>
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import enquireScreen from '@/utils/device'
import enUS from 'ant-design-vue/lib/locale-provider/en_US'
import Vue from 'vue'

export default {
    data () {
      return {
        locale: zhCN,
      }
    },
    created () {
      let that = this
      // 监听语言变化事件
      this.$root.$on('changeLocale', (newLocale) => {
        that.locale = newLocale === 'zh_CN' ? zhCN : enUS
        console.log(that.locale)
      });
      enquireScreen(deviceType => {
        // tablet
        if (deviceType === 0) {
          that.$store.commit('TOGGLE_DEVICE', 'mobile')
          that.$store.dispatch('setSidebar', false)
        }
        // mobile
        else if (deviceType === 1) {
          that.$store.commit('TOGGLE_DEVICE', 'mobile')
          that.$store.dispatch('setSidebar', false)
        }
        else {
          that.$store.commit('TOGGLE_DEVICE', 'desktop')
          that.$store.dispatch('setSidebar', true)
        }

      })
    },
  mounted () {
    this.setLanguage()
  },
  methods: {
    setLanguage () {
      let lang = Vue.ls.get('lang', 'zh_CN')
      this.$i18n.locale = lang
      this.$root.$emit('changeLocale', lang)
    }
  }
}
</script>
<style>
#app {
  height: 100%;
}
</style>